import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// vuex缺点。一刷新页面，就会清空数据，如果想长期保存这个数据，
// 可以借助本地存储或者后台接口

// 模拟接口
const createData = function ({ name }) {
  return new Promise((resolve, reject) => {
    resolve({
      list: [
        { id: 1, city: '北京', name },
        { id: 2, city: '上海', name },
      ],
    })
  })
}

// 数据状态管理器
export default new Vuex.Store({
  // 数据仓库
  state: {
    token: localStorage.getItem('token') || '',
    list: [],
    msg: '',
    arr: [1, 2, 3, 4, 5, 6],
  },
  // 处理同步逻辑提交的地方
  mutations: {
    // login
    SET_LOGIN_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', state.token)
    },
    SET_PAGEA_LIST(state, list) {
      state.list = list
      console.log(state.list, 'vuex---list---mutation')
    },
    SET_TEST_MSG(state, msg) {
      state.msg = msg
    },
  },
  // 处理异步逻辑的地方，最终要将结果-提交给mutaion
  actions: {
    async fetch_list({ commit }, { name }) {
      const res = await createData({ name })
      commit('SET_PAGEA_LIST', res.list)
      console.log('res:', res.list)
    },
  },
  // 计算属性
  getters: {
    allCount(state) {
      return state.arr.reduce((num, item) => {
        return num + item
      }, 0)
    },
    myName() {
      return 'devin'
    },
  },
  // 模块化
  modules: {},
})
